<%--
  Created by IntelliJ IDEA.
  User: Colorful
  Date: 2023/8/15
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<html>
<head>
    <title>支付 - 猫眼电影 - 一网打尽好电影</title>
    <link rel="stylesheet" href="${path}/css/payMoney.css" type="text/css">
    <script type="text/javascript" rel="script" src="${path}/js/jquery-3.6.4.js"></script>
</head>
<body>
<%@include file="header.jsp"%>
<div class="container" id="app">
    <div class="work">
        <div class="order-progress-bar">
            <div class="step first done">
                <span class="step-num">1</span>
                <div class="bar"></div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="step done">
                <span class="step-num">2</span>
                <div class="bar"></div>
                <span class="step-text">选择座位</span>
            </div>
            <div class="step done">
                <span class="step-num">3</span>
                <div class="bar"></div>
                <span class="step-text">14分钟内付款</span>
            </div>
            <div class="step last ">
                <span class="step-num">4</span>
                <div class="bar"></div>
                <span class="step-text">影院取票观影</span>
            </div>
        </div>
        <div class="count-down-wrapper">
            <div class="count-down">
                <p class="time-left">请在<span class="minute"></span>分钟<span class="second"></span>秒内完成支付！</p>
                <p class="tip">超时订单会自动取消，如遇支付问题，请致电猫眼客服：1010-5335</p>
            </div>
        </div>
        <p class="warning">请仔细核对场次信息，出票后将<span class="attention">无法退票和改签</span></p>
        <table class="order-table">
            <thead>
            <tr>
                <th>影片</th>
                <th>时间</th>
                <th>影院</th>
                <th>座位</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <c:set var="orders" value="${sessionScope.orders}"/>
                <td class="movie-name">《${orders.movie_cn_name}》</td>
                <td class="showtime">${orders.audTime}</td>
                <td class="cinema-name">${orders.cinema_name}</td>
                <td>
                    <span class="hall">${orders.audName}</span>
                    <div class="seats">
                        <span class="border"><i>${orders.seat}</i></span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="right">
            <div class="price-wrapper">
                <span>实际支付：<span class="price">￥${orders.orders_price}</span></span>
            </div>
            <div>
                <div class="pay-btn"onclick="over()">确认支付</div>
            </div>
        </div>
        <div class="modal-container" style="display:none">
            <div class="modal">
                <span class="iocn"></span>
                <p class="tip">支付超时，该订单已失效，请重新购买</p>
                <div class="ok-btn btn" onclick="ok()">我知道了</div>
            </div>
        </div>
    </div>
</div>
<c:set var="orderId" value="${sessionScope.orderId}"/>
<%@include file="footer.jsp"%>
<script>
    function over() {
        let seatId='${orders.seatId}';
        let orderId='${orderId}';
        let audId='${orders.audId}';
        window.location="${path}/OrderUserServlet?prom=updOrderOver&orderId="+orderId+"&seatId="+seatId+"&audId="+audId+"&money=${orders.orders_price}&orderName=${orders.movie_cn_name}";
    }
    function ok() {
        window.location="${path}/index.jsp";

    }
</script>
</body>
</html>
